<script setup lang="ts">
import { onMounted, ref, reactive, h } from "vue";
import { useRoute, useRouter } from "vue-router";
import { DynamicTable } from "@/components/DynamicTable";
import { PaginationConfig, TableColumn } from "@/components/DynamicTable/types";
import DynamicForm from "@/components/DynamicForm/index.vue";
import type { DynamicFormInstance } from "@/components/DynamicForm/types";
import { FormItemConfig } from "@/components/DynamicForm/types";
import { ElMessage, ElMessageBox } from "element-plus";
import { StatusTag } from "@/components/DynamicTable/components";
import { queryTaskData } from "../servers";

const route = useRoute();
const router = useRouter();

const taskId = ref<number>(Number(route.params.taskId));
const taskName = ref<string>((route.query.taskName as string) || "");
const assetList = ref([]);
const loading = ref(false);

const pagination = reactive<PaginationConfig>({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  pageSizes: [10, 20, 50],
  layout: "total, sizes, prev, pager, next",
  background: true,
});

// 表单引用
const searchFormRef = ref<DynamicFormInstance>();

const columns = ref<TableColumn[]>([
  {
    label: "序号",
    prop: "index",
    show: true,
    width: 120,
    render: (row, column, cellValue, index) => {
      return (pagination.currentPage - 1) * pagination.pageSize + index + 1;
    },
  },
  {
    label: "资产名称",
    prop: "asset_name",
    show: true,
    width: 120,
  },
  {
    label: "暴露面资产IP",
    prop: "exposure_asset_ip",
    show: true,
    width: 120,
  },
  {
    label: "开放端口",
    prop: "open_port",
    show: true,
    width: 120,
  },
  {
    label: "内网映射IP",
    prop: "internal_mapping_ip",
    show: true,
    width: 120,
  },
  {
    label: "服务类型",
    prop: "service_type",
    show: true,
    width: 120,
  },
  {
    label: "资产类型",
    prop: "asset_type",
    show: true,
    width: 120,
  },
  {
    label: "资产标签",
    prop: "asset_tag",
    show: true,
    width: 120,
  },
  {
    label: "业务系统名称",
    prop: "business_system_name",
    show: true,
    width: 120,
  },
  {
    label: "所属部门",
    prop: "department",
    show: true,
    width: 120,
  },
  {
    label: "负责人姓名",
    prop: "person_in_charge_name",
    show: true,
    width: 120,
  },
  {
    label: "负责人电话",
    prop: "person_in_charge_phone",
    show: true,
    width: 120,
  },
  {
    label: "负责人邮箱",
    prop: "person_in_charge_email",
    show: true,
    width: 120,
  },
  {
    label: "负载均衡IP",
    prop: "load_balancer_ip",
    show: true,
    width: 120,
  },
  {
    label: "软件名称",
    prop: "software_name",
    show: true,
    width: 120,
  },
  {
    label: "软件版本",
    prop: "software_version",
    show: true,
    width: 120,
  },
  {
    label: "Web应用访问地址",
    prop: "web_application_url",
    show: true,
    width: 120,
  },
  {
    label: "访问方式",
    prop: "access_method",
    show: true,
    width: 120,
  },
  {
    label: "资产用途",
    prop: "asset_purpose",
    show: true,
    width: 120,
  },
]);

// 搜索表单数据
const searchFormData = reactive({
  asset_name: "",
  exposure_asset_ip: "",
  service_type: "",
  asset_type: "",
  department: "",
});

// 搜索表单配置
const searchFormConfig: FormItemConfig[] = [
  {
    key: "asset_name",
    name: "资产名称",
    type: "input",
    placeholder: "请输入资产名称",
    params: {
      clearable: true,
      style: { width: "200px" },
    },
  },
  {
    key: "exposure_asset_ip",
    name: "暴露面IP",
    type: "input",
    placeholder: "请输入暴露面IP",
    params: {
      clearable: true,
      style: { width: "200px" },
    },
  },
  {
    key: "service_type",
    name: "服务类型",
    type: "input",
    placeholder: "请输入服务类型",
    params: {
      clearable: true,
      style: { width: "200px" },
    },
  },
  {
    key: "asset_type",
    name: "资产类型",
    type: "input",
    placeholder: "请输入资产类型",
    params: {
      clearable: true,
      style: { width: "200px" },
    },
  },
  {
    key: "department",
    name: "所属部门",
    type: "input",
    placeholder: "请输入所属部门",
    params: {
      clearable: true,
      style: { width: "200px" },
    },
  },
];

const getPageData = async () => {
  loading.value = true;

  try {
    if (!taskId.value) {
      ElMessage.error("缺少任务ID");
      loading.value = false;
      return;
    }

    const response = await queryTaskData({
      task_id: taskId.value,
      page: pagination.currentPage,
      per_page: pagination.pageSize,
      asset_name: searchFormData.asset_name,
      exposure_asset_ip: searchFormData.exposure_asset_ip,
      service_type: searchFormData.service_type,
      asset_type: searchFormData.asset_type,
      department: searchFormData.department,
    });

    if (response.code === 2000) {
      assetList.value = response.data.assets || [];
      pagination.total = response.data.total || 0;
    } else {
      ElMessage.error(response.message || "获取数据失败");
      assetList.value = [];
      pagination.total = 0;
    }
  } catch (error) {
    console.error("获取数据失败:", error);
    ElMessage.error("获取数据失败");
    assetList.value = [];
    pagination.total = 0;
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  getPageData();
});

const handleSearch = (value: any) => {
  // 更新搜索表单数据
  searchFormData.asset_name = value.asset_name || "";
  searchFormData.exposure_asset_ip = value.exposure_asset_ip || "";
  searchFormData.service_type = value.service_type || "";
  searchFormData.asset_type = value.asset_type || "";
  searchFormData.department = value.department || "";
  pagination.currentPage = 1;
  getPageData();
};

const handleSearchReset = () => {
  // 重置表单数据
  searchFormRef.value?.resetFields();
  searchFormData.asset_name = "";
  searchFormData.exposure_asset_ip = "";
  searchFormData.service_type = "";
  searchFormData.asset_type = "";
  searchFormData.department = "";
  pagination.currentPage = 1;
  getPageData();
};

const handlePaginationChange = (page: number) => {
  pagination.currentPage = page;
  getPageData();
};

const handleSizeChange = (size: number) => {
  pagination.pageSize = size;
  pagination.currentPage = 1; // 重置到第一页
  getPageData();
};

// 返回任务列表
const handleGoBack = () => {
  router.push("/asset-report/asset-management-platform");
};
</script>

<template>
  <div>
    <!-- 页面头部 -->
    <div class="page-header">
      <el-button type="primary" @click="handleGoBack">
        <!-- <el-icon><ArrowLeft /></el-icon> -->
        返回
      </el-button>
    </div>

    <!-- 搜索表单 -->
    <el-card shadow="never">
      <h3 style="margin-bottom: 20px">任务详情 - {{ taskName }}</h3>
      <div class="search-form-container">
        <DynamicForm
          ref="searchFormRef"
          v-model="searchFormData"
          :form-config="searchFormConfig"
          :gutter="16"
          label-width="80px"
          type="search"
          @search="handleSearch"
          @reset="handleSearchReset"
        />
      </div>
    </el-card>

    <div style="height: 10px"></div>

    <el-card>
      <DynamicTable
        :pagination="pagination"
        :columns="columns"
        :data="assetList"
        :loading="loading"
        @current-page-change="handlePaginationChange"
        @size-change="handleSizeChange"
      />
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    color: #303133;
    font-size: 20px;
    font-weight: 600;
  }
}

// 标签样式
:deep(.el-tag) {
  margin-right: 4px;
  margin-bottom: 2px;
}

// 标签输入框样式
:deep(.el-input.is-small .el-input__inner) {
  height: 24px;
}

// 状态修改弹窗样式
:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-textarea__inner) {
  resize: vertical;
  min-height: 80px;
}

// 响应式设计
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
